<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>盒模型示例</title>
    <style>
        /* 外层容器 */
        .container {
            width: 300px; /* 容器宽度 */
            margin: 20px 0; /* 上下外边距 */
        }
        /* 横线盒子 */
        .line-box {
            width: 100%;
            height: 80px; /* 盒子高度 */
            border: 1px solid #000; /* 边框（盒模型的border） */
            padding-top: 20px; /* 内边距，控制横线位置 */
            box-sizing: border-box; /* 盒模型：border和padding计入宽度 */
        }
        /* 横线样式 */
        .line {
            width: 80%;
            height: 1px;
            background-color: #000;
            margin: 0 auto; /* 水平居中 */
        }
        /* 数字按钮容器 */
        .num-group {
            display: flex; /* 弹性盒模型布局 */
            gap: 10px; /* 按钮之间的间距 */
            margin-top: 10px;
        }
        /* 数字按钮样式 */
        .num-btn {
            width: 30px;
            height: 30px;
            border: 1px solid #66f; /* 蓝色边框 */
            border-radius: 4px; /* 圆角 */
            display: flex;
            align-items: center;
            justify-content: center;
            color: #66f; /* 蓝色文字 */
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div class="container">
        <!-- 带横线的盒子 -->
        <div class="line-box">
            <div class="line"></div>
        </div>
        <!-- 数字按钮组 -->
        <div class="num-group">
            <div class="num-btn">1</div>
            <div class="num-btn" style="background-color: #f0f0f0;">2</div>
            <div class="num-btn" style="background-color: #f0f0f0;">3</div>
            <div class="num-btn" style="background-color: #f0f0f0;">4</div>
            <div class="num-btn" style="background-color: #f0f0f0;">5</div>
            <div class="num-btn" style="background-color: #f0f0f0;">6</div>
        </div>
    </div>
</body>
</html>